<template>
	<view class="stepDiv">
		<div class="myUnit" v-if="list.length">
			<div @click="flag=!flag" style="display: flex;justify-content: space-between">
				<uni-section title="审核流程" type="line"></uni-section>
				<div>
					<u-icon v-if="!flag" name="arrow-down"></u-icon>
					<u-icon v-else name="arrow-up"></u-icon>
				</div>
			</div>
			<div v-if="flag">
				<div class="steps" :class="{activeStep:item.flag==0}" v-for="(item, index) in list">
					<div class="step" style="display: flex;justify-content: space-between;">
						<div style="font-weight: bold;">
							{{ list.length - index }}.{{item.processName}}
						</div>
						<div>
							{{item.createTime||''}}
						</div>
					</div>
					<div class="step">
						<div style="margin-left: 10px;" :class="{primaryTag:item.result==0,redTag:item.result==1}">
							{{item.userName}}
						</div>
					</div>
					<div class="step" style="margin-left: 10px;" v-if="item.remark">
						{{item.remark||''}}
					</div>
				</div>
			</div>
		</div>
	</view>
</template>

<script>
	import {
		listApproveLog
	} from "@/api/taskMng/index.js"
	export default {
		data() {
			return {
				flag: false,
				list: []
			}
		},
		methods: {
			show(templateType, id) {
				let req = {
					handleId: id,
					pageNum: 1,
					pageSize: 1000,
					templateType: templateType //0:检测任务，1：外勤作业，2：报告编制，4：工程备案
				}
				listApproveLog(req).then(res => {
					this.list = res.list
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.steps {
		position: relative;
		padding-bottom: 10px;
		border-bottom: 2px dashed #f3f4f5;
	}

	.step {
		padding: 5px;
		position: relative;
	}

	.step:nth-child(3) {
		display: flex;
		justify-content: space-between;
	}

	.primaryTag {
		color: $u-primary;
	}

	.redTag {
		color: #fa3534;
	}

	.activeStep {
		font-size: 16px;
		color: $u-primary;
	}
</style>